import { Button, Drawer, Switch } from 'antd';
import { ColumnsType } from 'antd/es/table/interface';
import { DragItem, DragList } from 'components/UILibrary/dragList';
import React from 'react';
import { JSONObject } from 'admin/schema/common';
import { HandleColInfo, ColInfoResponse } from 'admin/schema/Task';
import './style.scss';
interface CustomColProp {
  callback: (res: ColInfoResponse[]) => any;
}

interface CustomColState {
  cols: DragItem[];
  visible: boolean;
}
/**【定制列】--任务模块-通用弹窗 */
export class CustomCol extends React.PureComponent<CustomColProp, CustomColState> {
  private dragListRef: React.RefObject<DragList>;

  constructor(prop: CustomColProp) {
    super(prop);
    this.dragListRef = React.createRef();
    this.state = {
      cols: [],
      visible: false,
    };
  }

  public show(): void {
    this.setState({
      visible: true,
    });
  }

  public close(): void {
    this.setState({
      visible: false,
    });
  }
  /**表格-渲染 */
  private colHandler(cols: ColumnsType<any>) {
    const arr = ['转人工数', '转人工率', '转人工接起量', '转人工接起率', '转人工呼损量', '转人工呼损率','转接人工状态','转接人工等待的时长','人工介入时长']
    return cols.filter((item: any) => !arr.includes(item.title)).map(item => {
      return {
        data: {
          key: item.key,
          name: item.title,
          switch: (item as any).switch,
        },
        render: (data: JSONObject, index: number) => (
          <div className="callrecord-customcol-tablerow">
            <span className="callrecord-customcol-tableindex">{index + 1}</span>
            <span className="callrecord-customcol-colname">{data.name}</span>
            <span className="callrecord-customcol-colvisible">
              <Switch
                checked={data.switch === 'on'}
                onChange={val => {
                  data.switch = val ? 'on' : 'off';
                  this.forceUpdate();
                }}
              />
            </span>
          </div>
        ),
      };
    });
  }

  /**列-赋值 */
  public setCol(cols: HandleColInfo[]): void {
    const tablerow = this.colHandler(cols);
    console.log('tablerow', tablerow);
    this.setState({
      cols: tablerow,
    });
    this.dragListRef.current?.setValue({
      items: tablerow,
    });
  }
  /**提交数据 */
  private submitData(): void {
    const val = this.dragListRef.current?.getValue();
    const res = val?.map(item => {
      const data = item.data;
      return {
        columnName: data.key,
        switch: data.switch,
      };
    }) as ColInfoResponse[];
    this.close();
    this.props.callback(res);
  }
  private buildFooter() {
    return (
      <div className="drawer-footer-buttongroup">
        <Button
          type="primary"
          onClick={() => {
            this.submitData();
          }}
        >
          确定
        </Button>
        <Button
          onClick={() => {
            this.close();
          }}
        >
          取消
        </Button>
      </div>
    );
  }
  render() {
    console.log('####定制列-弹窗====render');
    const { visible } = this.state;
    const { dragListRef } = this;

    return (
      <Drawer
        visible={visible}
        title="展示列设置"
        width={500}
        onClose={() => {
          this.close();
        }}
        footer={this.buildFooter()}
      >
        <div className="callrecord-customcol-title">
          <span>列表顺序</span>
          <span className="sub">鼠标长按列表即可通过拖拽修改顺序</span>
        </div>
        <div className="callrecord-customcol-tableheader">
          <span className="callrecord-customcol-tableindex">顺序</span>
          <span className="callrecord-customcol-colname">列表名称</span>
          <span className="callrecord-customcol-colvisible">是否显示</span>
        </div>
        <div className="callrecord-customcol-tablebody">
          <DragList ref={dragListRef} items={this.state.cols} />
        </div>
      </Drawer>
    );
  }
}
